<template>
    <div class="content">
        <div class="toIndex" @click="toIndex">
            <img src="~_assets/back.png" />
            返回首页
        </div>
        <div class="actInfo">
            <div class="infoTitle">活动信息</div>
            <div class="infoContent">
                <div>
                    <div class="row">
                        活动主题：<span v-text="activityTheme"></span>
                    </div>
                    <div class="row">
                        活动类型：<span v-text="receiveType"></span>
                    </div>
                </div>
                <div>
                    <div class="row">
                        活动状态：<span v-text="activityVerifyStatus"></span>
                    </div>
                    <div class="row">
                        所属系统：<span v-text="activityAttribution"></span>
                    </div>
                </div>
                <div>
                    <div class="row">
                        <span></span>
                    </div>
                    <div class="row" style="width:3rem;">
                        活动日期：<span><span v-text="startTime"></span>至<span v-text="endTime"></span></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="infoEchat">
            <div class="echatTitle">
                <span style="margin-right:33%;">活动趋势</span>
                <span style="margin-right:2%;" class="txtline" @click="trend(1)">今日</span>
                <span style="margin-right:2%;" class="txtline" @click="trend(2)">昨日</span>
                <span style="margin-right:2%;" class="txtline" @click="trend(3)">最近7日</span>
                <span style="margin-right:2%;" class="txtline" @click="trend(4)">最近30日</span>
                <span>活动日期：</span>
                <el-date-picker v-model="time" type="datetimerange" :picker-options="pickerOptions" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
                </el-date-picker>
                <div class="searchBut" style="margin-left:1%" @click="trend(5)"><img src="../../assets/search.png" class="foundPic"/>搜索</div>
            </div>
            <div class="echatNum">
                浏览次数：<span style="margin-right:2%" v-text="seeNum"></span>
                参与次数：<span style="margin-right:2%" v-text="joinNum"></span>
                获奖次数：<span style="margin-right:2%" v-text="getNum"></span>
            </div>
            <div class="echats">
                <chart ref="chart1" :options="orgOptions" class="lineChart"></chart>
            </div>
        </div>
    </div>
</template>
<script>
import "echarts/lib/chart/line";
import Bus from '@/bus.js'

require("echarts/lib/component/legend");
import {
  GET_ACTIVITY_INFO_BY_CODE,
  ACTIVITY_TREND,
  ACTIVITY_TREND_BY_DAY,
  ACTIVITY_TREND_BY_MONTH
} from "@/config/url";

export default {
  data() {
    return {
      pickerOptions: "",
      activityTheme: "", // 活动主题
      activityAttribution: "", // 活动类型
      activityVerifyStatus: "", //活动状态
      receiveType: "", // 所属系统
      startTime: "", //开始时间
      endTime: "", //结束时间
      time: "", //时间区间
      seeNum: "", //浏览次数
      joinNum: "", //参与次数
      getNum: "", //获奖次数
      seeCountArr: [], //折线图浏览次数
      joinCountArr: [], //折线图参与次数
      getCountArr: [], //折线图获奖次数
      timeCountArr: [] //x轴时间段
    };
  },
  mounted() {
    this.findInfo();
    this.trend(3);
    if (document.body.clientHeight < 1000) {
      $(".echats").height(326);
    }
  },
  methods: {
    toIndex() {
      // this.$router.push("/actSettings");
      Bus.$emit('selectTabAct',{
        newTab:'活动设置',
        oldTab:'活动统计'
      })
    },
    findInfo() {
      let that = this;
      this.$fetch(GET_ACTIVITY_INFO_BY_CODE, {
        activityCode: sessionStorage.getItem("activityCode")
      }).then(
        res => {
          that.activityTheme = res.data.activity_theme;
          that.activityAttribution = res.data.activity_attribution;
          let activityVerifyStatus;
          if(res.data.activity_status == '990013'){
            activityVerifyStatus = '下架'
          }else if(res.data.activity_status == '990014'){
            activityVerifyStatus = '上架'
          }else{
            activityVerifyStatus = '作废'
          }
          that.activityVerifyStatus = activityVerifyStatus;
          that.receiveType = res.data.receive_type;
          that.startTime = res.data.start_time;
          that.endTime = res.data.end_time;
        },
        err => {
          this.$message({
            showClose: true,
            type: "warning",
            message: "网络异常,请稍后再试!"
          });
        }
      );
    },
    trend(type) {
      if (type == 1) {
        // 今天
        this.$fetch(ACTIVITY_TREND, {
          activityCode: sessionStorage.getItem("activityCode"),
          type: 0
        }).then(
          res => {
            let seeArr = [];
            let joinArr = [];
            let getArr = [];
            let timeArr = [];
            for (let i = 0; i < res.data.length; i++) {
              seeArr.push(res.data[i].browse_count);
              joinArr.push(res.data[i].in_count);
              getArr.push(res.data[i].prize_count);
              timeArr.push(res.data[i].time);
            }
            // timeArr.push("00:00","01:00","02:00","03:00","04:00","05:00","06:00","07:00","08:00","09:00","10:00","11:00","12:00","13:00","14:00","15:00","16:00","17:00","18:00","19:00","20:00","21:00","22:00","23:00",);
            this.display_dial_plate(seeArr, joinArr, getArr, timeArr);
            this.seeNum = res.total.browse_count;
            this.joinNum = res.total.in_count;
            this.getNum = res.total.prize_count;
          },
          err => {
            this.$message({
              showClose: true,
              type: "warning",
              message: "网络异常,请稍后再试!"
            });
          }
        );
      } else if (type == 2) {
        // 昨天
        this.$fetch(ACTIVITY_TREND, {
          activityCode: sessionStorage.getItem("activityCode"),
          type: -1
        }).then(
          res => {
            let seeArr = [];
            let joinArr = [];
            let getArr = [];
            let timeArr = [];
            for (let j = 0; j < res.data.length; j++) {
              seeArr.push(res.data[j].browse_count);
              joinArr.push(res.data[j].in_count);
              getArr.push(res.data[j].prize_count);
              timeArr.push(res.data[j].time);
            }
            this.display_dial_plate(seeArr, joinArr, getArr, timeArr);
            this.seeNum = res.total.browse_count;
            this.joinNum = res.total.in_count;
            this.getNum = res.total.prize_count;
          },
          err => {
            this.$message({
              showClose: true,
              type: "warning",
              message: "网络异常,请稍后再试!"
            });
          }
        );
      } else if (type == 3) {
        // 最近7日
        this.$fetch(ACTIVITY_TREND_BY_DAY, {
          activityCode: sessionStorage.getItem("activityCode"),
          day: 7
        }).then(
          res => {
            let seeArr = [];
            let joinArr = [];
            let getArr = [];
            let timeArr = [];
            for (let z = 0; z < res.data.length; z++) {
              seeArr.push(res.data[z].browse_count);
              joinArr.push(res.data[z].in_count);
              getArr.push(res.data[z].prize_count);
              timeArr.push(res.data[z].time);
            }
            this.display_dial_plate(seeArr, joinArr, getArr, timeArr);
            this.seeNum = res.total.browse_count;
            this.joinNum = res.total.in_count;
            this.getNum = res.total.prize_count;
          },
          err => {
            this.$message({
              showClose: true,
              type: "warning",
              message: "网络异常,请稍后再试!"
            });
          }
        );
      } else if (type == 4) {
        // 最近30日
        this.$fetch(ACTIVITY_TREND_BY_DAY, {
          activityCode: sessionStorage.getItem("activityCode"),
          day: 30
        }).then(
          res => {
            let seeArr = [];
            let joinArr = [];
            let getArr = [];
            let timeArr = [];
            for (let t = 0; t < res.data.length; t++) {
              seeArr.push(res.data[t].browse_count);
              joinArr.push(res.data[t].in_count);
              getArr.push(res.data[t].prize_count);
              timeArr.push(res.data[t].time);
            }
            this.display_dial_plate(seeArr, joinArr, getArr, timeArr);
            this.seeNum = res.total.browse_count;
            this.joinNum = res.total.in_count;
            this.getNum = res.total.prize_count;
          },
          err => {
            this.$message({
              showClose: true,
              type: "warning",
              message: "网络异常,请稍后再试!"
            });
          }
        );
      } else if (type == 5) {
        // 自行选择时间段
        let startTime;
        let endTime;
        if (this.time == "" || this.time == null || this.time == undefined) {
          startTime = "";
          endTime = "";
        } else {
          startTime = this.moment(this.time[0]).format("YYYY-MM-DD HH:mm:ss");
          endTime = this.moment(this.time[1]).format("YYYY-MM-DD HH:mm:ss");
        }
        this.$fetch(ACTIVITY_TREND_BY_MONTH, {
          activityCode: sessionStorage.getItem("activityCode"),
          startTime: startTime,
          endTime: endTime
        }).then(
          res => {
            let seeArr = [];
            let joinArr = [];
            let getArr = [];
            let timeArr = [];
            for (let m = 0; m < res.data.length; m++) {
              seeArr.push(res.data[m].browse_count);
              joinArr.push(res.data[m].in_count);
              getArr.push(res.data[m].prize_count);
              timeArr.push(res.data[m].time);
            }
            this.display_dial_plate(seeArr, joinArr, getArr, timeArr);
            this.seeNum = res.total.browse_count;
            this.joinNum = res.total.in_count;
            this.getNum = res.total.prize_count;
          },
          err => {
            this.$message({
              showClose: true,
              type: "warning",
              message: "网络异常,请稍后再试!"
            });
          }
        );
      }
    },
    display_dial_plate(s, j, g, t) {
      this.seeCountArr = [];
      this.joinCountArr = [];
      this.getCountArr = [];
      this.timeCountArr = [];
      if (s != null && s != "" && s != undefined) {
        this.seeCountArr = s;
      } else {
        this.seeCountArr = [];
      }
      if (j != null && j != "" && j != undefined) {
        this.joinCountArr = j;
      } else {
        this.joinCountArr = [];
      }
      if (g != null && g != "" && g != undefined) {
        this.getCountArr = g;
      } else {
        this.getCountArr = [];
      }
      if (t != null && t != "" && t != undefined) {
        this.timeCountArr = t;
      } else {
        this.timeCountArr = [];
      }
      this.orgOptions.series[0].data = this.seeCountArr;
      this.orgOptions.series[1].data = this.joinCountArr;
      this.orgOptions.series[2].data = this.getCountArr;
      this.orgOptions.xAxis[0].data = this.timeCountArr;
    }
  },
  computed: {
    orgOptions() {
      return {
        backgroundColor: "rgba(4,11,29,0)",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: "#57617B"
            }
          }
        },
        legend: {
          icon: "rect",
          itemWidth: 22,
          itemHeight: 10,
          itemGap: 18,
          data: ["浏览次数", "参与次数", "获奖次数"],
          left: "4%",
          textStyle: {
            fontSize: 14
            // color: '#fff'
          },
          tooltip: {
            show: true
          }
        },
        grid: {
          left: "0",
          right: "3%",
          left: "1.5%",
          bottom: "4%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: "#57617B"
              }
            },
            data: this.timeArr,
            axisTick: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "",
            axisLine: {
              lineStyle: {
                color: "#57617B"
              }
            },
            axisLabel: {
              margin: 10,
              textStyle: {
                fontSize: 20
              },
              formatter: function(value, index) {
                var array = [value == 0 ? "" : value];
                return array;
              }
            },
            splitLine: {
              lineStyle: {
                color: "rgba(0,0,0,0)"
              }
            }
          }
        ],
        series: [
          {
            name: "浏览次数",
            type: "line",
            // smooth: true,
            symbol: "circle",
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 1
              }
            },
            // areaStyle: {
            //     normal: {
            //         color: {
            //             type: 'linear',
            //             colorStops: [{
            //                 offset: 0, color: 'rgba(0, 198, 255, 0.15)' // 0% 处的颜色
            //             }, {
            //                 offset: 0.8, color: 'rgba(0, 198, 255, 0)' // 100% 处的颜色
            //             }],
            //             global: false // 缺省为 false
            //         },
            //         shadowColor: 'rgba(0, 0, 0, 0.1)',
            //         shadowBlur: 10
            //     }
            // },
            itemStyle: {
              normal: {
                color: "#3395FF",
                borderColor: "rgba(0, 198, 255,0.5)",
                borderWidth: 12
              }
            },
            data: this.seeCountArr
            //   data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
          },
          {
            name: "参与次数",
            type: "line",
            // smooth: true,
            symbol: "circle",
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 1
              }
            },
            // areaStyle: {
            //     normal: {
            //         color: {
            //             type: 'linear',
            //             colorStops: [{
            //                 offset: 0, color: 'rgba(223, 38, 164, 0.15)' // 0% 处的颜色
            //             }, {
            //                 offset: 0.8, color: 'rgba(223, 38, 164, 0)' // 100% 处的颜色
            //             }],
            //             global: false // 缺省为 false
            //         },

            //         shadowColor: 'rgba(0, 0, 0, 0.1)',
            //         shadowBlur: 10
            //     }
            // },
            itemStyle: {
              normal: {
                color: "#F74358",
                borderColor: "rgba(223,38,164,0.5)",
                borderWidth: 12
              }
            },
            data: this.joinCountArr
            //   data: [220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122]
          },
          {
            name: "获奖次数",
            type: "line",
            // smooth: true,
            symbol: "circle",
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 1
              }
            },
            // areaStyle: {
            //     normal: {
            //         color: {
            //             type: 'linear',
            //             colorStops: [{
            //                 offset: 0, color: 'rgba(223, 38, 164, 0.15)' // 0% 处的颜色
            //             }, {
            //                 offset: 0.8, color: 'rgba(223, 38, 164, 0)' // 100% 处的颜色
            //             }],
            //             global: false // 缺省为 false
            //         },

            //         shadowColor: 'rgba(0, 0, 0, 0.1)',
            //         shadowBlur: 10
            //     }
            // },
            itemStyle: {
              normal: {
                color: "#FF7400",
                borderColor: "rgba(223,38,164,0.5)",
                borderWidth: 12
              }
            },
            data: this.getCountArr
            //   data: [230, 192, 135, 155, 132, 201, 144, 160, 130, 120, 175, 132]
          }
        ]
      };
    }
  }
};
</script>
<style lang="less" scoped>
@import "~_config/mixin.less";

.toIndex {
  cursor: pointer;
  .wh(1596px,0.3rem);
  line-height: 0.3rem;
  .mg();
  img {
    .wh(24px,24px);
  }
  .sc(20px,rgba(2,31,78,1));
}
.actInfo {
  width: 1596px;
  .mg();
  .infoTitle {
    padding-left: 19px;
    .bg(#CADAFF);
    font-size: 18px;
    height: 54px;
    line-height: 54px;
    border: 1px solid rgba(224, 238, 249, 1);
    border-radius: 4px 4px 0px 0px;
  }
  .infoContent {
    height: 140px;
    .bg(#fff);
    border: 1px solid rgba(224, 238, 249, 1);
    border-radius: 0px 4px 4px 0px;
    padding: 20px 60px;
    font-size: 16px;
    letter-spacing: 4px;
    .fx(row,flex-start);
    .row {
      line-height: 50px;
      width: 2.2rem;
      height: 50px;
    }
  }
}
.infoEchat {
  .wh(1596px,621px);
  .mg();
  margin-top: 10px;
  .echatTitle {
    padding-left: 19px;
    .bg(#CADAFF);
    font-size: 18px;
    height: 54px;
    line-height: 54px;
    border: 1px solid rgba(224, 238, 249, 1);
    display: flex;
    align-items: center;
    .txtline {
      text-decoration: underline;
      color: #3395ff;
      cursor: pointer;
    }
  }
  .echatNum {
    width: 1596px;
    height: 54px;
    line-height: 54px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(224, 238, 249, 1);
    .fx(row,flex-end);
  }
  .echats {
    width: 1596px;
    height: 550px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(224, 238, 249, 1);
    border-top: none;
    .lineChart {
      width: 100%;
      // height: 100%;
    }
  }
}
</style>
